<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>网上购票</title>
<link rel="stylesheet" href="resources/css/frozen.css">
<link rel="stylesheet" href="resources/css/main.css">
<script src="resources/lib/zepto.min.js"></script>
<script src="resources/js/frozen.js"></script>
<script src="resources/js/config.js"></script>
<script src="resources/js/main.js"></script>

</head>
<body ontouchend="">
	<header class="ui-header ui-header-positive ui-border-b">
		<i class="ui-icon-return" onclick="location='index.html'"></i>
		<h1>选择起点站</h1>
	</header>
	<footer class="ui-footer ui-footer-btn">
		<ul id="footer" class="ui-tiled ui-border-t">
			<li data-href="index.html" class="ui-border-r">
				<div>查询购票</div>
			</li>
			<li data-href="order.html" class="ui-border-r">
				<div>订单查询</div>
			</li>
			<li data-href="member.html">
				<div>会员中心</div>
			</li>
		</ul>
	</footer>
	<section class="ui-container">
		<section>
			<div class="ui-searchbar-wrap ui-border-b">
				<div class="ui-searchbar ui-border-radius">
					<i class="ui-icon-search"></i>
					<div class="ui-searchbar-text">
						站点名称或拼音，如“上海”或“sh”
					</div>
					<div class="ui-searchbar-input">
						<input id="end-station-query" value="" type="text" placeholder="请输入站点名称或拼音" autocapitalize="off">
					</div>
					<i class="ui-icon-close"></i>
				</div>
				<button class="ui-searchbar-cancel">取消</button>
			</div>
		</section>

        <section id="end-station-container" class="ui-selector" style="display: none;">
            <header>
                <h3>查询结果</h3>
            </header>
            <ul id="end-station-list" class="end-station ui-list ui-list-text ui-list-cover ui-border-tb">
            </ul>
			<div id="empty-text" class="ui-flex ui-flex-pack-center" style="display: none;">
				<div>未查询到站点</div>
			</div>
        </section>

		<section id="recent-end-station-container" class="ui-selector" style="display: none;">
			<header>
				<h3>最近查询</h3>
			</header>
			<ul id="recent-end-station-list" class="recent-end-station ui-list ui-list-text ui-list-cover ui-border-tb">
			</ul>
			<div class="ui-btn-wrap">
				<button id="btn-clear-recent-end-station" class="ui-btn-lg"> 清空 </button>
			</div>
		</section>
	</section>
	
	<div id="loading" class="ui-loading-block hide">
		<div class="ui-loading-cnt">
			<i class="ui-loading-bright"></i>
			<p>努力加载中...</p>
		</div>
	</div>

<script>
var timer;

(function (){
	/* -------------------- 根据localStorage中的值，初始化界面 -------------------- */
	
	// 加载最近查询站点
	showRecentEndStations();

	/* -------------------- 绑定事件 -------------------- */
	
	// 查询框点击事件
	$(".ui-searchbar").tap(function(){
		$(".ui-searchbar-wrap").addClass("focus");
		$(".ui-searchbar-input input").focus();
	});
	
	// 取消按钮点击事件
	$(".ui-searchbar-cancel").tap(function(){
		$(".ui-searchbar-wrap").removeClass("focus");
	});
	
	// 清除按钮点击事件
	$(".ui-searchbar-wrap .ui-searchbar .ui-icon-close").tap(function(){
		$("#end-station-query").val("");
	});
	
	// 搜索框输入改变事件
	$("#end-station-query").on("input", function(){
		// 为了避免用输入法输入中文时，触发本事件，采用延迟查询
		clearInterval(timer);
		timer = setInterval(
			function(){
				queryEndStation();
			},
			1000
		); 
	});
	
    // 查询结果列表点击事件
	$(document).on("tap", "#end-station-list li", function(){
		var endStationId = $(this).attr("station-id");
		var endStationName = $(this).html();
		sessionStorage.endStationId = endStationId;
		sessionStorage.endStationName = endStationName;
		
		addRecentEndStations({
			endStationId: endStationId,
			endStationName: endStationName
		});
		
		location.href = "index.html";
	});
    
	// 最近查询列表点击事件
	$(document).on("tap", "#recent-end-station-list li", function(){
		var endStationId = $(this).attr("station-id");
		var endStationName = $(this).html();
		sessionStorage.endStationId = endStationId;
		sessionStorage.endStationName = endStationName;
		location.href = "index.html";
	});
	
	// 清空最近查询按钮点击事件
	$("#btn-clear-recent-end-station").tap(function(){
		clearRecentEndStations();
	});
	
	// 底部主菜单初始化
	initFooter("#footer");
})();

// 查询
function queryEndStation() {
	clearInterval(timer);
	if($.trim($("#end-station-query").val()).length>1) {
		$("#empty-text").hide();
		showLoading("#loading");
		// 查询起点站
		ajax({
			url: appConfig.baseUrl + "/BusTicketInfo.go",
			data: {
				method: "queryEndStationInfo",
				query: $("#end-station-query").val(),
				proxyId: appConfig.proxyId,
			},
			failMessage: "查询失败，请重试",
			success: function(data) {
				hideLoading("#loading");
				$("#end-station-list").empty();
				if(!!data.rows) {
					for(var i=0; i<data.rows.length; i++) {
						var record = data.rows[i];
						$("#end-station-list").append(
							"<li class='ui-border-t' station-id='" + record.station_id + "'>" + record.station_name + "</li>"
						);
					}  
				} else {
					$("#empty-text").show();
				}
				$("#end-station-container").show();
			}
		});
	}
}

// 显示常用站点
function showRecentEndStations() {
	var recentEndStationList = getRecentEndStations();
	if(!!recentEndStationList && recentEndStationList.length>0) {
		$("#recent-end-station-list").empty();
		for(var i=0; i<recentEndStationList.length; i++) {
			var endStation = recentEndStationList[i];
			$("#recent-end-station-list").append(
				"<li class='ui-border-t end-station-id='" + endStation.endStationId +  
				"'>" + endStation.endStationName + "</li>"
			);
		}
		$("#recent-end-station-container").show();
	}
}

// 新增常用站点
function addRecentEndStations(endStation) {
	var recentEndStationList = getRecentEndStations();
	for(var i=0; i<recentEndStationList.length; i++) {
		var r = recentEndStationList[i];
		if(r.endStationId===endStation.routeIdId) {
			return;
		}
	}
	recentEndStationList.push(endStation);
	localStorage.setItem("recentEndStations", JSON.stringify(recentEndStationList));
}

// 清空常用站点
function clearRecentEndStations() {
	localStorage.removeItem("recentEndStations");
	$("#recent-end-station-container").hide();
	$("#recent-end-station-list").empty();
}

// 从本地存储获取常用站点
function getRecentEndStations() {
	var recentEndStations = localStorage.getItem("recentEndStations");
	if(!!recentEndStations) {
		return JSON.parse(recentEndStations);
	} else {
		return [];
	}
}
</script>
</body>
</html>